<script>
import UserinfoDetail from '@/views/userinfo/UserinfoDetail.vue'
import UserinfoPassword from '@/views/userinfo/UserinfoPassword.vue'

export default {
  name: 'HomeView',
  components: { UserinfoPassword, UserinfoDetail },
  data () {
    return {
      loginInfo: {}
    }
  },
  created () {
    this.getLoginInfo()
  },
  methods: {
    logout () {
      this.$confirm('确定退出系统吗?', { type: 'info' }).then(() => {
        sessionStorage.removeItem('loginInfo')
        this.$router.replace('/')
      }).catch(() => {})
    },
    showDialog () {
      this.$refs.userinfoDetail.getUserInfo()
    },
    getLoginInfo () {
      const loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'))
      this.loginInfo = { ...loginInfo }
    },
    showPassword () {
      this.$refs.userinfoPassword.getLoginInfo()
    }
  }
}
</script>

<template>
<el-container class="container">
  <el-header style="background-color: #545c64;color: #fff;border-bottom: 1px solid #fff">
    <el-row style="height:100%">
      <el-col class="col" :span="8">
        <p class="title">电影后台管理系统</p>
      </el-col>
      <el-col class="col" :span="8" :offset="8" style="justify-content: right;padding-right: 20px">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ loginInfo.nickname }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="showDialog">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="showPassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
  <el-container>
    <el-aside>
      <el-menu style="height: 100%"
        :default-active="$route.path"
        background-color="#545c64"
        text-color="#fff"
               router
        active-text-color="#ffd04b">
        <el-menu-item index="/home/userinfo">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/home/role">
          <i class="el-icon-refrigerator"></i>
          <span slot="title">角色管理</span>
        </el-menu-item>
        <el-menu-item index="/home/film">
          <i class="el-icon-video-camera"></i>
          <span slot="title">电影管理</span>
        </el-menu-item>
        <el-menu-item index="/home/actor">
          <i class="el-icon-video-camera-solid"></i>
          <span slot="title">导演管理</span>
        </el-menu-item>
        <el-menu-item index="/home/category">
          <i class="el-icon-reading"></i>
          <span slot="title">电影分类管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
  <userinfo-detail @close="getLoginInfo" ref="userinfoDetail"/>
  <userinfo-password ref="userinfoPassword"/>
</el-container>
</template>

<style scoped>
.container{
  height: 100vh;
}
.container .col{
  height: 100%;
  display: flex;
  align-items: center;
}
.container .title{
  font-size: 18px;
  font-weight: bold;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
